

<template>
  <view class="Mall4j withdrawal-mian">
    <form class="withdrawal-mian-form">
      <!-- <view class='withdrawal-tab1'>
      <text class='withdrawal-tab1-text'>提现账户</text>
      <image src='https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/pay.png'></image>
      <text>支付宝</text>
    </view> -->
      <view class="withdrawal-tab2">
        <view class="withdrawal-tab2-text">{{ i18n.withdrawalAmount }}</view>
        <input type="number" :placeholder="i18n.availableCashAmount + settledAmount" placeholder-class="withdrawal-plh" :value="amount" @input="onAmountInput"></input>
        <view class="withdrawal-tab2-text2" @tap="onAllWithdraw">{{ i18n.withdrawAll }}</view>
      </view>
      <!-- <view class='withdrawal-tab3'>
      <text class='withdrawal-tab3-text'>短信验证码</text>
      <input type='text' placeholder='请输入验证码'></input>
      <view class='line'></view>
      <text class='withdrawal-tab3-text2'>获取验证码</text>
    </view> -->
      <button class="withdrawal-btn" @tap="confirmWithdraw">{{ i18n.confirmWithdrawal }}</button>
      <!-- 提现tips -->
      <view class="rule-block">
        <text class="tip">{{ i18n.WithdrawalRules1 }}{{ amountMin }}{{ i18n.yuan }}</text>
        <text class="tip">{{ i18n.WithdrawalRules2 }}{{ amountMax }}{{ i18n.yuan }}</text>
        <text v-if="frequency==-1" class="tip">{{ i18n.WithdrawalRules3 }}</text>
        <text v-else class="tip">{{ i18n.WithdrawalRules31 }}{{ frequency === 30 ? '' : frequency }}{{ frequency === 30 ? i18n.WithdrawalRules34 : i18n.WithdrawalRules32 }}{{ number }}{{ i18n.WithdrawalRules33 }}</text>
        <text class="tip">4.{{ paymentExplain }}</text>
      </view>
    </form>

  </view>
</template>

<script>
var http = require('../../utils/http.js')

export default {

  components: {},
  props: {},
  data () {
    return {
      settledAmount: 0,
      amount: null,
      addupAmount: '',
      frequency: '',
      number: '',
      amountMax: '',
      amountMin: '',
      paymentExplain: ''
    }
  },

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  onShow: function () {
    // 头部导航标题
    uni.setNavigationBarTitle({
      title: this.i18n.withdrawal
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getDisInfoData()
    this.loadWithdrawCashRule()
  },
  methods: {
    /**
    * 获取用户钱包数据
    */
    getDisInfoData: function () {
      var params = {
        url: '/p/distribution/user/info',
        method: 'GET',
        data: {
          shopId: 1
        },
        callBack: res => {
          this.setData({
            settledAmount: res.distributionUserWallet.settledAmount,
            addupAmount: res.distributionUserWallet.addupAmount
          })
        }
      }
      http.request(params)
    },

    /**
     * 确认提现
     */
    confirmWithdraw: function () {
      if (!this.amount || this.amount <= 0) {
        uni.showToast({
          title: this.i18n.greaterThanZero,
          icon: 'none'
        })
        return
      } else if (this.amount > this.settledAmount) {
        uni.showToast({
          title: this.i18n.insufficientBalance,
          icon: 'none'
        })
        return
      }
      http.request({
        url: '/p/distribution/withdrawCash/save',
        method: 'POST',
        data: {
          shopId: 1,
          amount: this.amount
        },
        callBack: res => {
          uni.showModal({
            content: this.i18n.withdrawalApplicationSubmitted,
            showCancel: false,
            cancelText: this.i18n.cancel,
            confirmText: this.i18n.confirm,
            success: (moadlRes) => {
              if (moadlRes.confirm) {
                uni.navigateBack({
                  delta: 1
                })
              }
            }
          })
        }
      })
    },
    onAmountInput: function (e) {
      this.setData({
        amount: e.detail.value
      })
    },
    onAllWithdraw: function () {
      this.setData({
        amount: this.settledAmount
      })
    },

    /**
     * 加载提现规则
     */
    loadWithdrawCashRule: function () {
      var ths = this
      var params = {
        url: '/p/distribution/withdrawCash/info',
        method: 'GET',
        data: {
          shopId: 1
        },
        callBack: function (res) {
          ths.setData({
            frequency: res.frequency,
            number: res.number,
            amountMax: res.amountMax,
            amountMin: res.amountMin,
            paymentExplain: res.paymentExplain
          })
        }
      }
      http.request(params)
    }
  }
}
</script>
<style>
@import "./withdrawal.css";
</style>
